<script setup lang="ts">
type Props = {
  data?: { value: string; label: string }[];
  title?: string;
  direction?: "vertical" | "horizontal";
  card?: boolean;
  cardShadow?: string;
};

const props = withDefaults(defineProps<Props>(), { cardShadow: "never" });
</script>

<template>
  <component :is="props.card ? 'el-card' : 'div'" :shadow="props.cardShadow">
    <template #header>
      <div class="card-header">{{ props.title }}</div>
    </template>
    <el-descriptions
      :title="props.card ? null : props.title"
      :direction="props.direction"
    >
      <el-descriptions-item
        v-for="value in props.data"
        :key="value.label"
        :label="value.label"
      >
        {{ value.value }}
      </el-descriptions-item>
    </el-descriptions>
  </component>
</template>
<style lang="scss" scoped></style>
